<template>
  <div style="display: inline-block;text-align: left;">
    <el-button type="primary" size="small" @click="addUser()">
      {{$t('staff.batchCompany')}}
    </el-button>
    <el-dialog
      v-if="dialogTableVisible"
      :before-close="closeDia"
      :visible.sync="dialogTableVisible"
      :title="$t('table.add')"
      width="40%"
    >
      <el-form
        ref="formData"
        :model="formData"
        reset-field
        label-position="right"
        label-width="auto"
      >
        <el-form-item :label="$t('table.company')">
          <el-select
            v-model="Company_list.id"
            @visible-change="departmentNull"
            @change="CompanyIndex(Company_list.id)"
          >
            <el-option
              v-for="(item, index) in Company_list"
              :key="index"
              :label="item.company"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('table.department')" prop="id">
          <el-select v-model="formData.id" clear>
            <el-option
              v-for="(item, index) in department_list"
              :key="index"
              :label="item.department"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item align="right">
          <div>
            <el-button type="primary" size="small" @click="submitForm()">{{
              $t("table.complete")
            }}</el-button>
            <el-button size="small" @click="closeDia()">{{
              $t("table.cancel")
            }}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import store from "@/store";
import { get_list } from "@/api/organization_manage/organization_manage";
import {
  department_get_select,
  service_batchDepartment
} from "@/api/user_manage/user_manage";
export default {
  props: ["multipleSelection"],
  data() {
    return {
      dialogTableVisible: false,
      Company_list: null,
      formData: {},
      department_list: null
    };
  },
  created() {
    this.time();
  },
  methods: {
    addUser() {
      console.log(this.multipleSelection, "this,row_id");
      this.dialogTableVisible = true;
      get_list(store.getters.token).then(res => {
        this.Company_list = res.data.list.data;
        console.log(this.Company_list, "Company_list");
      });
    },

    // 部门数据
    CompanyIndex(id) {
      console.log(id, "id");
      department_get_select(store.getters.token, { company_id: id }).then(
        res => {
          this.department_list = res.data.list;
          console.log(this.department_list, "this,department_list");
          console.log(res, "res.data.list");
        }
      );
    },
    departmentNull(type) {
      if (type) {
        this.$set(this.formData, "id", "");
      }
    },
    //提交数据
    submitForm() {
      var data = {
        company_id: this.Company_list.id,
        department_id: this.formData.id,
        person_id: this.multipleSelection
      };
      
      if(this.multipleSelection == ""){
        this.$message.error(this.$t('staff.batchDeviceTip'))
      }else{
        service_batchDepartment(store.getters.token, data).then(res => {
        if (res.data.status) {
          this.$message.success(this.$t("table.edit_complete"));
          this.$emit("getLists");
          this.dialogTableVisible = false;
        }else{
          this.$message.error(this.$t("table.add_fail") + res.data.msg)
        }
      });
      }
    },

    // 关闭弹窗
    closeDia() {
      this.department_list = ''
      this.Company_list = ''
      this.formData.id = ''
      this.dialogTableVisible = false;
    }
  }
};
</script>

<style scoped>
/* 上传图片样式 */
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 2px dashed #cccccc;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  margin: auto;
}
.avatar {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  width: auto;
  height: 178px;
  display: block;
}
</style>
